<template>
  <div id="inovativeBusiness">
    <el-container>
      <el-main>
        <el-row >
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="合同编号">
                <el-input placeholder="合同编号" v-model="form.contractNoGlobal"></el-input>
              </el-form-item>
              <el-form-item label="合同名称">
                <el-input placeholder="合同名称" v-model="form.contractName"></el-input>
              </el-form-item>
              <el-form-item label="计费账期">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="form.cycle_id"
                    type="month"
                    placeholder="计费账期"
                    value-format="yyyyMM"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
            </el-row>
            <el-row class="floatLeft">
              <el-form-item label="网格名称" prop="trellisName" label-width="110px">
                <el-select @change="getStaffsFirst" v-model="form.trellisCode" filterable placeholder="请选择" >
                  <el-option
                    v-for="item in depts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户经理" prop="accountManager" >
                <el-select  v-model="form.yzStaffId" filterable placeholder="请选择">
                  <el-option
                    v-for="item in staffs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetSearchForm" size="small">重置</el-button>
            </el-row>
          </el-form>
        </el-row>
        <el-row class="floatLeft">
<!--          <el-button type="primary" size="small" plain>新增</el-button>-->
<!--          <el-button type="success" size="small"  plain>修改</el-button>-->
<!--          <el-button type="danger" size="small"  plain>删除</el-button>-->
          <el-button type="primary" size="small"  @click="dialogFormVisible = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          <el-button type="primary" size="small" @click="downloadTemplate">下载模板<i
            class="el-icon-upload el-icon--right"></i></el-button>
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="500">
          <el-table-column label="序号"
            type="index"
            width="50"></el-table-column>
          <el-table-column prop="areaCode" label="地市"></el-table-column>
          <el-table-column prop="trellisCode" label="网格编码"></el-table-column>
          <el-table-column prop="trellisName" label="行业网格"></el-table-column>
          <el-table-column prop="yzStaffId" label="客户经理编码"></el-table-column>
          <el-table-column prop="accountManager" label="客户经理"></el-table-column>
          <el-table-column prop="contractNoGlobal" label="合同编码"></el-table-column>
          <el-table-column prop="contractName" label="合同名称"></el-table-column>
          <el-table-column prop="companyName" label="合同单位"></el-table-column>
          <el-table-column prop="totalAmount" label="合同总金额(元）"></el-table-column>
          <el-table-column prop="repositoryNameVendor" label="签约主体"></el-table-column>
          <el-table-column prop="businessCodingCode" label="业务编码"></el-table-column>
          <el-table-column prop="businessCodingName" label="业务类别"></el-table-column>
          <el-table-column prop="cycleId" label="账期"></el-table-column>
          <el-table-column prop="amount" label="收入(元)"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :hide-on-single-page="false"
          :page-size="10"
          @current-change="currentChange">
        </el-pagination>
        <el-dialog title="上传创新业务模板" :visible.sync="dialogFormVisible">
          <el-upload
            class="upload-demo"
            action
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="uploadImg">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传Excel.xlsx/xls文件</div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="您上传的文件中，如下合同已被上传，本次上传失败。" :visible.sync="dialogTable">
          <el-table :data="dialog.table">
            <el-table-column property="网格" label="网格" width="150"></el-table-column>
            <el-table-column property="客户经理" label="客户经理" width="200"></el-table-column>
            <el-table-column property="合同号码" label="合同号码"></el-table-column>
            <el-table-column property="合同名称" label="合同名称"></el-table-column>
          </el-table>
        </el-dialog>
        <el-dialog title="您上传的文件中，如下合同已被上传，本次上传失败。" :visible.sync="dialogTable">
          <el-table :data="dialog.table">
            <el-table-column property="网格" label="网格" width="150"></el-table-column>
            <el-table-column property="客户经理" label="客户经理" width="200"></el-table-column>
            <el-table-column property="业务号码" label="业务号码"></el-table-column>
          </el-table>
        </el-dialog>
      </el-main>
    </el-container>
    <router-view/>
  </div>


</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {formatDate} from '../../components/utils/formatDate'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import global from '../../components/utils/global'
  import {
    downloadTemplate,
    getDept,
    getDeptStaff
  } from '../../components/utils/getDataFn'

  export default {
    name: 'inovativeBusiness',
    created () {
      this.staffId = getUrlParams('staffId')
      sessionStorage.setItem("staffId",this.staffId);
      getDept(this);
    },
    methods: {
      uploadImg(fileObj) {
        let _this = this;
        let formData = new FormData();
        formData.set("file", fileObj.file);
        axios.post(global.host+'/innovativeBusiness/upload', formData, {
          headers: {
            "Content-type": "multipart/form-data",
            "staffId":this.staffId
          }
        }).then(res=>{
          if(res.data.length>0 && res.data!=="上传成功" && res.data!=="请上次相关文件" && res.data.indexOf("单元格为空")<0){
            _this.dialogTable=true
            _this.dialog.table= res.data
          }else{
            _this.open(res.data)
            _this.searchFn()
          }
        }).catch()
      },open(message) {
        this.$alert(message, '上传', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
      },
      handleClick (row) {
        console.log(row)
      },
      downloadTemplate () {
        downloadTemplate('创新业务导入模板.xlsx')
      },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
      getStaffsFirst(){
        this.form.yzStaffId='';
        getDeptStaff(this.form.trellisCode,this);
      }   ,
      getStaffs(){
        this.dialog.form.yzStaffId='';
        getDeptStaff(this.dialog.form.trellisCode,this);
      }   ,
      resetSearchForm() {
        for (let item in this.form) {
          this.form[item] = ''
        }
      },
      searchFn () {
        this.startSize = 0
        this.endSize = 11
        this.currentPage = 1
        this.queryAll()
        this.queryAllCount()
      },
      onSubmit () {
        this.queryAll()
        this.queryAllCount()
      },
      queryAll: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host+'/innovativeBusiness/queryAll',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryAllCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host+'/innovativeBusiness/queryAllCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          contractName: this.form.contractName,
          contractNoGlobal: this.form.contractNoGlobal,
          yzStaffId: this.form.yzStaffId,
          trellisCode: this.form.trellisCode,
          signWay: this.form.signWay,
          staffId: this.staffId,
          cycleId:this.form.cycle_id
        }
      },

      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }

    }
    ,
    data () {
      return {
        staffs:[],
        depts:[],
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        dates: [],
        dialogFormVisible: false,
        dialogTable:false,
        formLabelWidth: '120px',
        fileList: [],
        dialog:{
          table:[]
        },
        form:{
          contractName: '',
          contractNoGlobal: '',
          yzStaffId: '',
          accountManager: '',
          trellisCode: '',
          trellisName: '',
          signWay: '',
          serialNumber:'',
          cycle_id:''
        }
      }
    }
  }
</script>

<style>
  #inovativeBusiness {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
